<template>
    <div class="flex flex-col min-h-screen bg-white">
        <!-- 导航栏 -->
        <header class="w-full bg-white shadow-sm fixed top-0 z-10">
            <div class="container mx-auto px-4 flex items-center justify-between">
                <div class="flex items-center">
                    <h1 class="text-2xl font-bold text-purple-600">AI Fan Fusion</h1>
                </div>
                <nav class="hidden md:flex items-center space-x-6">
                    <a href="#" class="text-gray-700 hover:text-purple-600 transition">Create Product</a>
                    <a href="#" class="text-gray-700 hover:text-purple-600 transition">Browse Examples</a>
                    <a href="#" class="text-gray-700 hover:text-purple-600 transition">FAQ</a>
                    <a href="#" class="bg-purple-600 text-gray-700 py-2 rounded-full font-medium hover:bg-purple-700 transition">Buy Now</a>
                </nav>
                <button class="md:hidden">
                    <icon-park-menu theme="outline" size="24" />
                </button>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 pt-20">
            <!-- 英雄区域 -->
            <section class="container mx-auto px-4 py-8 md:py-8">
                <div class="grid md:grid-cols-2 gap-8 items-center">
                    <div>
                        <span class="text-purple-600 font-medium mb-2 block">@the.megan.queen.official</span>
                        <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Appear with @the.megan.queen</h2>
                        <p class="text-lg text-gray-600 mb-8">Turn your selfies into custom merchandise with Megan! Our AI technology creates unique, personalized products to showcase your ultimate fan moment.</p>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <a @click="handleClick" class="border border-purple-600 text-purple-700 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition text-center cursor-pointer">
                                Create Your Product
                            </a>
                            <a href="#" class="border border-gray-300 text-gray-700 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition text-center">Browse Examples</a>
                        </div>
                    </div>
                    <div class="flex justify-end items-end">
                        <video src="/videos/11.mp4" autoplay loop muted class="rounded-2xl shadow-xl max-w-full h-[300px]" />
                    </div>
                </div>
            </section>

            <!-- 特点区域 -->
            <section class="bg-gray-50 py-16">
                <div class="container mx-auto px-4">
                    <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Show Off the Ultimate AI-Generated Collaboration</h2>
                    <div class="grid md:grid-cols-3 gap-8">
                        <div class="bg-white p-6 rounded-xl shadow-sm">
                            <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                                <icon-park-magic-wand theme="filled" size="28" class="text-purple-600" />
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">AI Magic Fusion</h3>
                            <p class="text-gray-600">Our advanced AI seamlessly merges your photo with Megan, creating authentic-looking artwork that captures your dream collaboration.</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-sm">
                            <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                                <icon-park-commodity theme="filled" size="28" class="text-purple-600" />
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Unique Products</h3>
                            <p class="text-gray-600">Transform your AI artwork into premium merchandise including picture frames, t-shirts, mugs, pillows, blankets, and towels that showcase your fandom.</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-sm">
                            <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                                <icon-park-crown theme="filled" size="28" class="text-purple-600" />
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">Stand Out</h3>
                            <p class="text-gray-600">Own truly one-of-a-kind merchandise that no one else has—perfect for showing off your favorite influencer connection to friends and family.</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 工作流程 -->
            <section class="container mx-auto px-4 py-16">
                <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">How It Works: Your Face + Megan</h2>
                <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Just a few steps to create your personalized product</p>
                <div class="grid md:grid-cols-4 gap-6">
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">1</div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Upload Your Selfie</h3>
                        <p class="text-gray-600">Choose your best photo to be featured alongside Megan. Our system works with most standard image formats.</p>
                    </div>
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">2</div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Select Megan's Pix</h3>
                        <p class="text-gray-600">Select one of Megan's pictures. There's a variety of pictures depending on the mood you're looking for.</p>
                    </div>
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">3</div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Choose Your Product</h3>
                        <p class="text-gray-600">Select from our premium merchandise options to showcase your personalized collaboration in the perfect format.</p>
                    </div>
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">4</div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Preview Your Creation</h3>
                        <p class="text-gray-600">Our AI instantly generates your custom artwork. You'll see exactly how you'll look together before finalizing your order.</p>
                    </div>
                </div>
            </section>

            <!-- 产品线展示 -->
            <section class="bg-gray-50 py-16">
                <div class="container mx-auto px-4">
                    <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Choose From Our Customizable Product Line</h2>
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
                        <div class="bg-white p-4 rounded-xl shadow-sm">
                            <img src="/images/product-tshirt.png" alt="T-shirt" class="w-full h-40 object-cover rounded-lg mb-4" />
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">Custom T-shirt</h3>
                            <p class="text-gray-600 text-sm">Show off your special photo with Megan</p>
                        </div>
                        <div class="bg-white p-4 rounded-xl shadow-sm">
                            <img src="/images/product-mug.png" alt="Mug" class="w-full h-40 object-cover rounded-lg mb-4" />
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">Personalized Mug</h3>
                            <p class="text-gray-600 text-sm">Enjoy your mornings with your idol</p>
                        </div>
                        <div class="bg-white p-4 rounded-xl shadow-sm">
                            <img src="/images/product-frame.png" alt="Frame" class="w-full h-40 object-cover rounded-lg mb-4" />
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">Elegant Frame</h3>
                            <p class="text-gray-600 text-sm">Preserve your dream photo forever</p>
                        </div>
                        <div class="bg-white p-4 rounded-xl shadow-sm">
                            <img src="/images/product-pillow.png" alt="Pillow" class="w-full h-40 object-cover rounded-lg mb-4" />
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">Comfy Pillow</h3>
                            <p class="text-gray-600 text-sm">Add a fan touch to your home</p>
                        </div>
                        <div class="bg-white p-4 rounded-xl shadow-sm">
                            <img src="/images/product-blanket.png" alt="Blanket" class="w-full h-40 object-cover rounded-lg mb-4" />
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">Custom Blanket</h3>
                            <p class="text-gray-600 text-sm">A warm and cozy fan experience</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 粉丝展示 -->
            <section class="container mx-auto px-4 py-16">
                <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Real Fans, Real Influencer Moments</h2>
                <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Show off your exclusive photo and join our growing fan community</p>
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <img src="/images/fan-1.png" alt="Fan Example" class="w-full h-48 object-cover" />
                        <div class="p-4">
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">Social Media Features</h3>
                            <p class="text-gray-600 text-sm">Get the chance to be highlighted by your favorite influencer when they showcase fan merchandise on their channels.</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <img src="/images/fan-2.png" alt="Fan Example" class="w-full h-48 object-cover" />
                        <div class="p-4">
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">Product Spotlights</h3>
                            <p class="text-gray-600 text-sm">The best user creations get featured on our product pages, inspiring other fans with your unique collaboration.</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <img src="/images/fan-3.png" alt="Fan Example" class="w-full h-48 object-cover" />
                        <div class="p-4">
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">Community Gallery</h3>
                            <p class="text-gray-600 text-sm">Share your creation with #FanFusion to join our growing community of fans displaying their influencer collaborations.</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <img src="/images/fan-4.png" alt="Fan Example" class="w-full h-48 object-cover" />
                        <div class="p-4">
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">VIP Recognition</h3>
                            <p class="text-gray-600 text-sm">Standout designs receive special recognition and may unlock exclusive influencer engagement opportunities.</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 为什么选择我们 -->
            <section class="bg-purple-600 text-white py-16">
                <div class="container mx-auto px-4">
                    <h2 class="text-3xl font-bold text-center mb-12">Why AI Fan Fusion Merch?</h2>
                    <div class="grid md:grid-cols-4 gap-8">
                        <div class="text-center">
                            <div class="flex justify-center mb-4">
                                <icon-park-like theme="filled" size="48" />
                            </div>
                            <h3 class="text-xl font-semibold mb-2">Support Your Favorites</h3>
                            <p class="text-purple-100">Influencers receive a revenue share from each purchase</p>
                        </div>
                        <div class="text-center">
                            <div class="flex justify-center mb-4">
                                <icon-park-global theme="filled" size="48" />
                            </div>
                            <h3 class="text-xl font-semibold mb-2">Global On-Demand Production</h3>
                            <p class="text-purple-100">No inventory, just personalized creation when ordered</p>
                        </div>
                        <div class="text-center">
                            <div class="flex justify-center mb-4">
                                <icon-park-design theme="filled" size="48" />
                            </div>
                            <h3 class="text-xl font-semibold mb-2">Zero Design Skills Required</h3>
                            <p class="text-purple-100">Our AI handles all the creative work automatically</p>
                        </div>
                        <div class="text-center">
                            <div class="flex justify-center mb-4">
                                <icon-park-shield theme="filled" size="48" />
                            </div>
                            <h3 class="text-xl font-semibold mb-2">Secure & Private</h3>
                            <p class="text-purple-100">Your data is protected, and we never share your images</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- FAQ部分 -->
            <section class="container mx-auto px-4 py-16">
                <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Frequently Asked Questions</h2>
                <div class="max-w-3xl mx-auto space-y-6">
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <h3 class="text-xl font-semibold text-gray-800 mb-3">Can I upload multiple photos for my design?</h3>
                        <p class="text-gray-600">Yes! You can upload multiple photos to create different variations or to mix and match for truly unique results. Our AI will help you select the best combination for your chosen product.</p>
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <h3 class="text-xl font-semibold text-gray-800 mb-3">Is my photo data secure?</h3>
                        <p class="text-gray-600">Absolutely. We use 100% encrypted uploads and automatically delete your photos after your order is processed. Your privacy is our priority, and we never share your images with third parties.</p>
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <h3 class="text-xl font-semibold text-gray-800 mb-3">How long does it take to receive my order?</h3>
                        <p class="text-gray-600">Most orders are delivered within 7-10 business days worldwide. Production takes 1-3 days, and shipping depends on your location. You'll receive tracking information once your order ships.</p>
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <h3 class="text-xl font-semibold text-gray-800 mb-3">What if I'm not happy with my artwork?</h3>
                        <p class="text-gray-600">We provide free previews and unlimited edits before you confirm your order. If you're still not satisfied with the received product, contact our customer service within 14 days for our happiness guarantee.</p>
                    </div>
                </div>
            </section>

            <!-- 行动召唤 -->
            <section class="bg-gray-50 py-16">
                <div class="container mx-auto px-4 text-center">
                    <h2 class="text-3xl font-bold text-gray-800 mb-6">Create Your Exclusive Product Today</h2>
                    <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">Turn your fan dreams into reality with just a few clicks. Our quick start process makes it easy to create your personalized influencer collaboration in minutes. Don't miss our limited-time launch discount!</p>
                    <div class="grid md:grid-cols-4 gap-6 max-w-4xl mx-auto mb-12">
                        <div class="bg-white p-6 rounded-xl shadow-sm">
                            <div class="text-4xl font-bold text-purple-600 mb-2">5</div>
                            <h3 class="text-lg font-medium text-gray-800 mb-1">Minute Process</h3>
                            <p class="text-gray-600 text-sm">From upload to order completion</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-sm">
                            <div class="text-4xl font-bold text-purple-600 mb-2">20%</div>
                            <h3 class="text-lg font-medium text-gray-800 mb-1">Launch Discount</h3>
                            <p class="text-gray-600 text-sm">Limited time offer on first orders</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-sm">
                            <div class="text-4xl font-bold text-purple-600 mb-2">10+</div>
                            <h3 class="text-lg font-medium text-gray-800 mb-1">Products</h3>
                            <p class="text-gray-600 text-sm">And growing every month</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-sm">
                            <div class="text-4xl font-bold text-purple-600 mb-2">1000+</div>
                            <h3 class="text-lg font-medium text-gray-800 mb-1">Happy Fans</h3>
                            <p class="text-gray-600 text-sm">With personalized merchandise</p>
                        </div>
                    </div>
                    <a href="#" class="bg-purple-600 text-white px-10 py-4 rounded-full font-medium text-lg hover:bg-purple-700 transition inline-block">Create Now</a>
                </div>
            </section>
        </main>

        <!-- 页脚 -->
        <footer class="bg-gray-800 text-white py-12">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center mb-8">
                    <div class="mb-6 md:mb-0">
                        <h2 class="text-2xl font-bold">AI Fan Fusion</h2>
                        <p class="text-gray-400">Turn fan dreams into reality</p>
                    </div>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <icon-park-instagram theme="outline" size="24" />
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <icon-park-tiktok theme="outline" size="24" />
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <icon-park-twitter theme="outline" size="24" />
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <icon-park-facebook theme="outline" size="24" />
                        </a>
                    </div>
                </div>
                <div class="border-t border-gray-700 pt-8">
                    <div class="grid md:grid-cols-4 gap-8">
                        <div>
                            <h3 class="text-lg font-semibold mb-4">Products</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="text-gray-400 hover:text-white transition">T-shirt</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Mug</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Frame</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Pillow</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Blanket</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold mb-4">Influencers</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Megan</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Collaborating Influencers</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Recommended Influencers</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Become an Influencer</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold mb-4">Support</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Refund Policy</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold mb-4">Subscribe</h3>
                            <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest products and discounts</p>
                            <div class="flex">
                                <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l-lg focus:outline-none w-full" />
                                <button class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700 transition">Subscribe</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                    <p>© 2023 AI Fan Fusion. All rights reserved.</p>
                </div>
            </div>
        </footer>

        <Agent :visible="visible" @close="handleClose" />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Agent from '@/components/ai/agent.vue';
import { HamburgerButton, MagicWand, Commodity, Crown, Like, Earth, Pencil, Shield, Instagram, Tiktok, Twitter, Facebook } from '@icon-park/vue-next';

export default defineComponent({
    name: 'HomePage',
    components: {
        Agent,
        'icon-park-menu': HamburgerButton,
        'icon-park-magic-wand': MagicWand, 
        'icon-park-commodity': Commodity,
        'icon-park-crown': Crown,
        'icon-park-like': Like,
        'icon-park-global': Earth,
        'icon-park-design': Pencil,
        'icon-park-shield': Shield,
        'icon-park-instagram': Instagram,
        'icon-park-tiktok': Tiktok,
        'icon-park-twitter': Twitter,
        'icon-park-facebook': Facebook
    },
    data() {
        return {
            visible: false
        }
    },
    methods: {
        handleClick() {
            this.visible = true;
        },
        handleClose() {
            this.visible = false;
        }
    }
});
</script>